<template>
  <a-form layout="vertical" ref="filterForm" :model="form">
    <a-form-item label="姓名" name="staffName">
      <a-input @pressEnter="searchStaffName" v-model:value="form.staffName"></a-input>
    </a-form-item>
    <a-form-item label="部门" name="departmentName">
      <a-input @pressEnter="searchDepartment" v-model:value="form.departmentName"></a-input>
    </a-form-item>
    <a-form-item label="职级" name="levelName">
      <a-input @pressEnter="searchLevel" v-model:value="form.levelName"></a-input>
    </a-form-item>
  </a-form>
</template>   

<script setup lang="ts">
import appStore from '@/store';
import { FormInstance } from 'ant-design-vue';
const { isClearFormRef } = storeToRefs(appStore.useCommonStore);
const filterForm = ref<FormInstance>();
const form = reactive({
  staffName: '',
  departmentName: '',
  levelName: '',
});
const searchStaffName = async (e) => {
  console.log(e.target.value,'e');
  const res = await appStore.useStaffStore.getStaffList(1, 10, { staffName: [e.target.value] });
  console.log(res, 'ressssss')
}
const searchDepartment =async (e) => {
  const res = await appStore.useStaffStore.getStaffList(1, 10, { departmentName: [e.target.value] });
}
const searchLevel = async (e) => {
  const res = await appStore.useStaffStore.getStaffList(1, 10, { levelName: [e.target.value] });
}

watch(isClearFormRef, async ()=> {
  // 清空表单
  filterForm.value?.resetFields();
  // 重新请求数据
  await appStore.useStaffStore.getStaffList();
});
</script>

<style lang="less" scoped>
form {
  margin-top: 30px;
}
input {
  width: 100%;
}
</style>
